<template>
  <div id="table">
    <BaseTable
      :table-data="tableData"
      :header="header"
      :config="config"
      :pagination="pagination"
      :selectable="(row: any) => row.number > 400"
      :cell-class-name="({ columnIndex }: any, a = '表格添加class') => {
        if (columnIndex >= 2 && !(columnIndex % 2)) {
          return 'single'
        }
      }"
      :header-cell-class-name="({ columnIndex }: any, a = '表头添加class') => {
        if (columnIndex >= 2 && !(columnIndex % 2)) {
          return 'headerSingle'
        }
      }"
      @handleSelectionChange="handleSelectionChange"
      @handleCurrentChange="handleCurrentChange"
      @handleSizeChange="handleSizeChange"
      @handleCurrentPageChange="handleCurrentPageChange"
    >
      <template #name="{ data, _data }">
        <div>{{ data.row[data.column.property] === _data }}</div>
        <div>{{ _data }}</div>
      </template>

      <!-- 展开行的内容 -->
      <!-- <template #expand="val">
        <div>{{ val.data }}</div>
      </template>

      <template #zip1="val">
        <el-button  size="small" @click="handleClick(val.data)">==={{ val.data.date }}</el-button>
      </template>-->
      <template #btn="{ data }">
        <el-button
          size="small"
          @click="handleClick(data)"
        >
          detail
        </el-button>
      </template>
    </BaseTable>
  </div>
</template>
<script lang="ts" setup>

/**
 * 注意！注意！注意！
 * selectable是多选框是否禁用的方法，这个方法不能写在js里，只能写在HTML里
 */

import { FilterVal, Header, InitData, Pagination } from '@/components/common/typing/table'
import { cloneDeep } from 'lodash-es'

// 按钮返回数据
const handleClick = (data: any) => {
  console.log('click')
  console.log(data)
}
// 多选获取数据
const handleSelectionChange = (data: any) => {
  console.log('handleSelectionChange')
  console.log(data)
}
// 点击获取当前行数据
const handleCurrentChange = (data: any) => {
  console.log('handleCurrentChange')
  console.log(data)
}

/**
 *
  total: number 总共多少条(必填),初始为0
  show: boolean 是否显示分页,默认false
  layout?: string 分页的样式
  pageSize?: number[] 可选每页切分多少条，默认[10, 20, 30, 50]
  currentPageSize?: number 当前每页多少条，默认20条
  disabled?: boolean  是否能点
  currentPage?: number 当前第几页，默认第一页
  small?: boolean 是否用small模式，默认false
  background?: boolean 是否有背景，默认false
 */
const pagination = ref<Pagination>({
  total: 0,
  layout: 'sizes, prev, pager, next, jumper',
  pageSize: [10, 20, 30, 150],
  currentPageSize: 10,
  disabled: false,
  currentPage: 1,
  small: false,
  background: true,
})

/**
  staticColumn:[
    type:string  expand展开行，展开行的内容用slot显示、selection多选框CheckBox、index序列号
    width:number 宽度
    fixed?:string|boolean 冻结
    align?: string 表格内容布局，left，center，right
  ]
  singleChoiceHigHlight: Boolean // 单选点击高亮
  border?: Boolean 是否显示表格线
  searchProp?: string 搜索数据的prop值，要和header数据里的search同时设置
  height?: Number 设置table的高度自动固定表头
  maxHeight?: Number table最大高度并且自动固定表头
  stripe?: Boolean 斑马纹
  showSummary?: Boolean 是否显示合计

  ===========重点=====================
  ranksMerge?: {
    isMerge:boolean 是否进行合并
    data:{
      row: string[] 行合并 row: ['id', 'name'],
      col: string[] 列合并col: ['amount1', 'amount2']
    }
  }
  =============注意：展开行和列合并不能同时使用=========

  当staticColumn设置了type: 'expand'展开行是对列合并有影响,排序也影响
 */
const config = {
  staticColumn: [
    // {
    //   type: 'expand',
    //   width: 50
    // }
    {
      type: 'selection',
      width: 50,
      align: 'center',
    },
    {
      type: 'index',
      width: 50,
      fixed: false,
      align: 'center',
    },
  ],
  singleChoiceHigHlight: true,
  border: true,
  searchProp: 'zip1',
  // height: 200,
  maxHeight: 560,
  // stripe: true,
  // showSummary: true,
  ranksMerge: {
    isMerge: true,
    data: {
      row: ['name', 'state'],
      col: ['zip1', 'zip2'],
    },
  },
}

/**
 * ========header嵌套进行表头合并===========
  label: string header显示的值，根据UI设置
  prop?: string 对应的key值，对应接口数据返回的key
  width?: number 宽度设置，可以省略，宽度自适应
  fixed?: boolean|string 固定某一列，一般是第一列和最后一列
  sort?: Boolean 排序
  align?: string 表格内容布局，left，center，right
  search?: { 要和config里的searchProp同时设置
    align: string 内容方位：left、right、center
    placeholder?: string
    size?: string 搜索框大小
  }
  slotName?: string 设置slotName，内容通过具名插槽填充
  filters?: FilterVal[] 过滤条件
  children：Header 嵌套进行表头合并
 */

const header = ref<Header[]>([
  {
    label: 'xxx',
    children: [
      {
        prop: 'name',
        label: 'Name',
        fixed: 'left',
        align: 'center',
        slotName: 'name',
      },
      {
        label: 'xxx2',
        children: [
          {
            prop: 'state',
            label: 'State',
            width: 150,
            fixed: false,
          },
          {
            prop: 'city',
            label: 'City',
            width: 150,
            fixed: false,
          },
        ],
      },

    ],
  },
  {
    prop: 'date',
    label: 'Date',
    width: 150,
    // fixed: 'left',
    sort: true,
    filters: [],
  },
  {
    label: 'merge1',
    children: [
      {
        prop: 'address',
        label: 'Address',
        width: 350,
        fixed: false,
        // slotName: 'address'
      },
      {
        prop: 'zip1',
        label: 'Zip1',
        width: 150,
        sort: false,
        fixed: false,
        // slotName: 'zip1'
      },
      {
        prop: 'zip2',
        label: 'Zip2',
        width: 150,
        sort: false,
        fixed: false,
      },
      {
        prop: 'number',
        label: 'Number',
        // width: 150,
        sort: true,
        fixed: false,
        filters: [],
      },
      {
        label: 'Operations',
        width: 150,
        prop: 'operations',
        fixed: 'right',
        slotName: 'btn',
        search: {
          align: 'center',
          placeholder: '输入zip号',
          size: 'small',
        },
      },
    ],
  },
])

/**
 * 接口数据
 */
const tableData = ref<InitData[]>([])
const allData = ref<InitData[]>([])

const init = () => {
  setTimeout(() => {
    allData.value = [
      {
        date: '2016-05-03',
        name: 'Tom0',
        state: 'California',
        city: 'Los Angeles',
        address: 'No. 189, Grove St, Los Angeles',
        zip1: 'CA 90034',
        zip2: 'CA 90074',
        number: 454,
        tag: 'Home',
      },
      {
        date: '2016-05-02',
        name: 'Tom',
        state: 'California',
        city: 'Los Angeles',
        address: 'No. 189, Grove St, Los Angeles',
        zip1: 'CA 90032',
        zip2: 'CA 90032',
        number: 454,
        tag: 'Office',
      },
      {
        date: '2016-05-04',
        name: 'Tom2',
        state: 'California1',
        city: 'Los Angeles',
        address: 'No. 189, Grove St, Los Angeles',
        zip1: 'CA 90036',
        zip2: 'CA 90044',
        number: 424,
        tag: 'Home',
      },
      {
        date: '2016-05-03',
        name: 'Tom2',
        state: 'California1',
        city: 'Los Angeles',
        address: 'No. 189, Grove St, Los Angeles',
        zip1: 'CA 90034',
        zip2: 'CA 90074',
        number: 454,
        tag: 'Home',
      },
      {
        date: '2016-05-02',
        name: 'Tom3',
        state: 'California2',
        city: 'Los Angeles',
        address: 'No. 189, Grove St, Los Angeles',
        zip1: 'CA 90032',
        zip2: 'CA 90032',
        number: 454,
        tag: 'Office',
      },
      {
        date: '2016-05-04',
        name: 'Tom3',
        state: 'California2',
        city: 'Los Angeles',
        address: 'No. 189, Grove St, Los Angeles',
        zip1: 'CA 90036',
        zip2: 'CA 90044',
        number: 424,
        tag: 'Home',
      },
      {
        date: '2016-05-03',
        name: 'Tom3',
        state: 'California3',
        city: 'Los Angeles',
        address: 'No. 189, Grove St, Los Angeles',
        zip1: 'CA 90034',
        zip2: 'CA 90074',
        number: 454,
        tag: 'Home',
      },
      {
        date: '2016-05-03',
        name: 'Tom3',
        state: 'California3',
        city: 'Los Angeles',
        address: 'No. 189, Grove St, Los Angeles',
        zip1: 'CA 90034',
        zip2: 'CA 90074',
        number: 454,
        tag: 'Home',
      },
      {
        date: '2016-05-02',
        name: 'Tom4',
        state: 'California3',
        city: 'Los Angeles9',
        address: 'No. 189, Grove St, Los Angeles',
        zip1: 'CA 90032',
        zip2: 'CA 90032',
        number: 454,
        tag: 'Office',
      },
      {
        date: '2016-05-04',
        name: 'Tom4',
        state: 'California10',
        city: 'Los Angeles',
        address: 'No. 189, Grove St, Los Angeles',
        zip1: 'CA 90036',
        zip2: 'CA 90044',
        number: 424,
        tag: 'Home',
      },
      {
        date: '2016-05-03',
        name: 'Tom4',
        state: 'California11',
        city: 'Los Angeles',
        address: 'No. 189, Grove St, Los Angeles',
        zip1: 'CA 90034',
        zip2: 'CA 90074',
        number: 454,
        tag: 'Home',
      },
      {
        date: '2016-05-02',
        name: 'Tom',
        state: 'California12',
        city: 'Los Angeles',
        address: 'No. 189, Grove St, Los Angeles',
        zip1: 'CA 90032',
        zip2: 'CA 90032',
        number: 454,
        tag: 'Office',
      },
      {
        date: '2016-05-04',
        name: 'Tom',
        state: 'California13',
        city: 'Los Angeles',
        address: 'No. 189, Grove St, Los Angeles',
        zip1: 'CA 90036',
        zip2: 'CA 90044',
        number: 424,
        tag: 'Home',
      },
      {
        date: '2016-05-01',
        name: 'Tomllll',
        state: 'California',
        city: 'Los Angeles',
        address: 'No. 189, Grove St, Los Angeles',
        zip1: 'CA 90037',
        zip2: 'CA 90037',
        number: 124,
        tag: 'Office',
      },
      {
        date: '2016-05-03',
        name: 'Tom',
        state: 'California',
        city: 'Los Angeles',
        address: 'No. 189, Grove St, Los Angeles',
        zip1: 'CA 90034',
        zip2: 'CA 90074',
        number: 454,
        tag: 'Home',
      },
      {
        date: '2016-05-02',
        name: 'Tom',
        state: 'California',
        city: 'Los Angeles',
        address: 'No. 189, Grove St, Los Angeles',
        zip1: 'CA 90032',
        zip2: 'CA 90032',
        number: 454,
        tag: 'Office',
      },
      {
        date: '2016-05-04',
        name: 'Tom',
        state: 'California',
        city: 'Los Angeles',
        address: 'No. 189, Grove St, Los Angeles',
        zip1: 'CA 90036',
        zip2: 'CA 90044',
        number: 424,
        tag: 'Home',
      },
      {
        date: '2016-05-01',
        name: 'Tom',
        state: 'California',
        city: 'Los Angeles',
        address: 'No. 189, Grove St, Los Angeles',
        zip1: 'CA 90037',
        zip2: 'CA 90037',
        number: 124,
        tag: 'Office',
      },
      {
        date: '2016-05-03',
        name: 'Tom',
        state: 'California',
        city: 'Los Angeles',
        address: 'No. 189, Grove St, Los Angeles',
        zip1: 'CA 90034',
        zip2: 'CA 90074',
        number: 454,
        tag: 'Home',
      },
      {
        date: '2016-05-02',
        name: 'Tom',
        state: 'California',
        city: 'Los Angeles',
        address: 'No. 189, Grove St, Los Angeles',
        zip1: 'CA 90032',
        zip2: 'CA 90032',
        number: 454,
        tag: 'Office',
      },
      {
        date: '2016-05-04',
        name: 'Tom',
        state: 'California',
        city: 'Los Angeles',
        address: 'No. 189, Grove St, Los Angeles',
        zip1: 'CA 90036',
        zip2: 'CA 90044',
        number: 424,
        tag: 'Home',
      },
      {
        date: '2016-05-01',
        name: 'Tom',
        state: 'California',
        city: 'Los Angeles',
        address: 'No. 189, Grove St, Los Angeles',
        zip1: 'CA 90037',
        zip2: 'CA 90037',
        number: 124,
        tag: 'Office',
      },
    ]
    pagination.value.total = allData.value.length
    console.log(pagination.value)
  }, 2000)
}
init()
/**
 * 每页多少行
 */
const handleSizeChange = (val: number) => {
  pagination.value.currentPageSize = val
}

/**
 * 当前第几页
 */
const handleCurrentPageChange = (val: number) => {
  pagination.value.currentPage = val
}
const currentPageData = computed(() => {
  const data = cloneDeep(allData.value)
  const { currentPage, currentPageSize } = pagination.value
  const start = (currentPage - 1) * currentPageSize
  const result = data.splice(start, currentPageSize)
  return result
})
// 动态添加filter数据,这个只是对当前页数据进行筛选，根据业务需求自定义，分页也是，demo是给的全数据
watchEffect(async () => {
  const date: string[] = []
  const number: string[] = []
  const dateFilter: FilterVal[] = []
  const numberFilter: FilterVal[] = []
  const getFilter = (item: InitData, key: string, arr1: string[], arr2: FilterVal[]) => {
    const val = item[key]
    if (arr1.indexOf(val) < 0) {
      arr1.push(val)
      arr2.push({ text: val, value: val })
    }
  }
  for (const item of currentPageData.value) {
    await getFilter(item, 'date', date, dateFilter)
    await getFilter(item, 'number', number, numberFilter)
  }
  const headerData = cloneDeep(header.value)
  headerData[1].filters = [...dateFilter]
  headerData[2].children && (headerData[2].children[3].filters = numberFilter)
  tableData.value = currentPageData.value
  header.value = headerData
})

</script>

<style lang="scss" scoped>
</style>
